<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script>

<style>
    html,
    body,
    #app {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        position: relative;
    }

    #app {
        width: 100vw;
        height: 100vh;
    }
</style>

<body>
    <div id="app">
        <canvas id="mycanvas"></canvas>
    </div>
</body>

</html>
<script>
    //创建场景
    var scene = new THREE.Scene();
    //设置相机（视野，显示口的宽高比，近裁剪面，远裁剪面）
    var app = document.getElementById("app");
    var camera = new THREE.PerspectiveCamera(75, app.clientWidth / app.clientHeight, 0.1, 1000);
    //设置相机的视点
    camera.position.set(0, 0, 100);
    //设置相机的朝向
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    //渲染器
    var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("mycanvas") });
    //设置渲染器的高度和宽度，如果加上第三个值 false，则按场景大小显示，等比例缩放
    renderer.setSize(app.clientWidth, app.clientHeight, false);
    renderer.setClearColor(0x3f3f3f, 1); // 设置背景颜色
    //创建一个平行光光源照射到物体上
    var light = new THREE.DirectionalLight(0xffffff, 1.5);
    //设置平型光照射方向，照射方向为设置的点照射到原点 正面打光
    light.position.set(0, 0, 1);
    //将灯光放到场景当中
    scene.add(light);

    //创建一个接受光照并带有纹理映射的立方体，并添加到场景中
    //首先，获取到纹理
    var map = THREE.ImageUtils.loadTexture("./img/1.jpg");

    //然后创建一个phong材质来处理着色，并传递给纹理映射
    var material = new THREE.MeshPhongMaterial({ map: map });

    //创建一个立方体的几何体
    var geometry = new THREE.BoxGeometry(10, 10, 1);

    //将集合体和材质放到一个网格中
    var cube = new THREE.Mesh(geometry, material);

    //将立方体网格添加到场景中
    scene.add(cube);

    //声明一个判断是否旋转的变量
    var rotationBool = true;

    (function animate() {
        renderer.render(scene, camera);
        if (rotationBool) {
            cube.rotation.x += 0.02;
            cube.rotation.y += 0.02;
        }

        requestAnimationFrame(animate);
    })();

    document.body.onclick = function () {
        // 点击切换
        rotationBool = !rotationBool;
    }

</script>